<template>
  <div>
    <el-form :model="formData" ref="formData" :rules="formRules" label-position="top" class="form-data">
      <el-form-item label="章节名称:" prop="chapterId">
        <el-select v-model="formData.chapterId" placeholder="请选择" style="width: 100%">
          <el-option :label="item.name" :value="item.id" v-for="(item, index) in chapterList" :key="index"/>
        </el-select>
      </el-form-item>
      <el-form-item label="问题名字:" prop="problemName">
        <el-input v-model="formData.problemName" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="上架状态:" prop="shelfStatus">
        <el-switch v-model="formData.shelfStatus" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="权重:" prop="weight">
        <el-input type="number" v-model="formData.weight" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="回答:" prop="answer">
        <Tinymce v-model="formData.answer" :height="400"></Tinymce>
      </el-form-item>
      <el-form-item class="form-button">
        <el-button class="but-view" @click="drawerClose">取 消</el-button>
        <el-button class="but-view" type="primary" @click="onSubmit">提 交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import Tinymce from '@/components/Tinymce'

  export default {
    props: {
      entity: Object,
      status: String
    },
    components: {
      Tinymce
    },
    name: 'CommonProblemTitleForm',
    data() {
      return {
        chapterList: [],
        formData: {
          answer: null, // 回答
          chapterId: null, // 章节id
          problemName: null, // 问题名字
          shelfStatus: null, // 上架状态：0未上架；1上架
          weight: null // 权重(数字越大越靠前)
        },
        formRules: {
          problemName: [
            { required: true, message: '请输入问题名字', trigger: 'blur' },
          ],
          chapterId: [
            { required: true, message: '请选择章节', trigger: 'blur' },
          ],
          answer: [
            { required: true, message: '请输入回答内容', trigger: 'blur' },
          ],
          weight: [
            { required: true, message: '请输入权重', trigger: 'blur' }
          ]
        }
      }
    },
    beforeMount() {
      if (this.entity) this.getDetails()
      this.getChapterRequest()
    },
    methods: {
      async onSubmit() {
        this.$refs.formData.validate(async(valid) => {
          if (!valid) return this.$message.warning('请完善信息')
          const url = this.entity && this.entity.id ? '/wx/commonProblem/update' : '/wx/commonProblem/add'
          await this.$ajax.post(url, this.formData)
          this.$message.success('操作成功!')
          this.$emit('refresh')
          this.drawerClose()
        })
      },
      async getChapterRequest() {
        const res = await this.$ajax.get('/wx/commonProblem/chapter/list')
        this.chapterList = res.rows
      },
      /**
       * 获取详情
       */
      async getDetails() {
        const res = await this.$ajax.get(`/wx/commonProblem/info?id=${this.entity.id || ''}`)
        this.formData = res.data
      },
      drawerClose() {
        this.$emit('close')
      }
    }
  }
</script>

<style scoped lang="scss">
  .image-view {
    width: 100%;
    height: 178px;
    position: relative;
    .el-icon-circle-close {
      font-size: 30px;
      color: red;
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 100;
    }
    .el-icon-circle-close:hover {
      cursor: pointer;
    }
  }
</style>
